<template>
<div>
  <el-form class="eleConfigForm" ref="eleConfigData" :model="eleConfigData" label-width="80px" size="mini">
    <el-form-item label="标签名"> 
      <el-input v-model="eleConfigData.label"></el-input>
    </el-form-item>
    <el-form-item label="键名">
      <el-input v-model="eleConfigData.key"></el-input>
    </el-form-item>
    <el-form-item label="默认值">
      <el-input v-model="eleConfigData.value"></el-input>
    </el-form-item>
    <el-form-item label="禁用">
      <el-switch v-model="eleConfigData.disabled"></el-switch>
    </el-form-item>
    <el-form-item label="必填">
      <el-switch v-model="eleConfigData.required"></el-switch>
    </el-form-item>
    <el-form-item label="所占行">
      <el-input-number v-model="eleConfigData.spannum" :min="1" :max="24" label="一行以24列分割"></el-input-number>
      （一行以24列分割）
    </el-form-item>
    <el-form-item label="可选中任意级别">
      <el-switch v-model="eleConfigData.checkStrictly"></el-switch>
    </el-form-item>
  </el-form>
  选项配置
  <el-radio-group v-model="optionConfig" size="mini" @change="optionConfigChange" style="margin-bottom: 5px;">
    <el-radio-button label="自定义"></el-radio-button>
    <el-radio-button label="从服务器获取"></el-radio-button>
  </el-radio-group>
  <el-button size="mini" @click="addOption()" v-if="optionConfig=='自定义'">新增</el-button>                         
  <div v-if="optionConfig=='自定义'">
    <el-row v-for="(item,index) in eleConfigData.options" :key="item.value" class="option-config">
      <el-col :span="8">
        <el-input v-model="item.value">
          <template slot="prepend">代码</template>
        </el-input>
      </el-col>
      <el-col :span="8">
        <el-input v-model="item.label">
          <template slot="prepend">值</template>
        </el-input>
      </el-col>
      <el-col :span="8">
        <el-switch v-model="item.disabled" active-text="禁用" inactive-text="启用"></el-switch>
      </el-col>
      <i class="el-icon-circle-close del-option" @click="eleConfigData.options.splice(index, 1);"></i>
    </el-row>
  </div>     
  <div v-if="optionConfig=='从服务器获取'" style="margin-bottom: 5px;">
    <el-input v-model="eleConfigData.optionsUrl">
      <template slot="prepend">数据URL</template>
    </el-input>
  </div>    
</div>
</template>

<script>
export default {
  props: {
    eleConfigData: {
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      optionConfig: "自定义"
    };
  },
  created() {
    if(!this.eleConfigData || this.eleConfigData.optionsUrl == ""){
      this.optionConfig = "自定义"
    }else{
      this.optionConfig = '从服务器获取'
    }
  },
  methods:{
    //新增选项值
    addOption() {
      this.$set(this.eleConfigData,"optionsUrl", "")
      this.$set(this.eleConfigData.options, this.eleConfigData.options.length, {value:"",label:"",disabled:false})  
    },
    //选项配置change
    optionConfigChange(label){
      this.optionConfig = label
      if(label == "从服务器获取"){
        // this.$set(this.eleConfigData,"optionsUrl", "")
        this.$set(this.eleConfigData,"options", [])
      }else{
        this.$set(this.eleConfigData,"optionsUrl", "")
        if(this.eleConfigData.options.length == 0){
          this.$set(this.eleConfigData.options, this.eleConfigData.options.length, {value:"",label:"",disabled:false})
        }
      }
    }
  }
};
</script>